<template>
    <div>
        <h1>显示居民</h1>

        姓名<input type="text" v-model="state.name">
        类型 <select v-model="state.type">
            <option value="">==请选择==</option>
            <option :value="1">业主</option>
            <option :value="2">租户</option>
        </select>
        <input type="button" value="查询" @click="Show">
        <input type="button" value="批量删除" @click="DeleteAll">
        <input type="button" value="批量审核" @click="examineAll">
        <input type="button" value="导出" @click="exportExcel">
        <table class="table table-border">
            <tr>
                <td>
                    <input type="checkbox" v-model="checkAll" @click="SelecAll">全选
                </td>
                <td>Id</td>
                <td>头像</td>
                <td>楼栋</td>
                <td>房间号</td>
                <td>姓名</td>
                <td>性别</td>
                <td>民族</td>
                <td>籍贯</td>
                <td>证件</td>
                <td>手机号</td>
                <td>类型</td>
                <td>审核状态</td>
                <td>操作</td>
            </tr>
            <tr v-for="item in list">
                <td>
                    <input type="checkbox" :value="item.id" v-model="ids">反选
                </td>
                <td>{{ item.id }}</td>
                <td><img :src="item.photo" alt="" width="100px" height="100px"></td>
                <td>{{ item.area }}</td>
                <td>{{ item.houseNo }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.sex }}</td>
                <td>{{ item.nation }}</td>
                <td>{{ item.where }}</td>
                <td>{{ item.card }}</td>
                <td>{{ item.phone.substring(0, 3) + '****' + item.phone.substring(7, 11) }}</td>
                <td>{{ item.type == 1 ? '业主' : '租户' }}</td>
                <td>{{ item.state == 1 ? '审核通过' : '审核不通过' }}</td>
                <td>
                    <input type="button" value="删除" @click="Delete(item.id)">
                    <input type="button" value="修改" @click="update(item.id)">
                </td>

            </tr>
        </table>
    </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import axios from 'axios';
import { useStore } from '../stores/user';
let store = useStore()
let router = useRouter();
let route = useRoute();

let data: any = reactive({
    state: {
        "name": "",
        "type": "",
        pageIndex: 1,
        pageSize: 2,

    },
    list: [],
    totalPage: 0,
    totalCount: 0,
    checkAll: false,
    ids: [],
});
let { state, list, totalPage, totalCount, checkAll, ids } = toRefs(data)

onMounted(() => {
    Show();
})
const Show = () => {


    let obj = {
        name: state.value.name,
        type: state.value.type,
        pageindex: state.value.pageIndex,
        pagesize: state.value.pageSize,
    }

    axios({
        url: '/api/JuMin/JuMinShow',
        method: 'get',
        params: obj
    }).then((res) => {
        console.log(res.data);
        list.value = res.data.data
        data.totalPage = res.data.totalPage
        data.totalCount = res.data.totalCount

    })
}
//全选与全不选
const SelecAll = () => {
    checkAll.value = !checkAll.value
    if (checkAll.value == true) {
        ids.value = list.value.map((item: any) => {
            return item.id
        })
    } else {
        ids.value = []
    }
}
//批量删除
const DeleteAll = () => {
    if (ids.value.length == 0) {
        alert("必选一项")
        return;
    }
    //友情提示
    var f = confirm("确定删除吗？")
    //发送网路请求

    if (f == true) {
        let obj = {
            ids: ids.value.toString(),//将数组转成字符串

        };
        axios({
            url: '/api/JuMin/JuMinDel',
            method: 'delete',
            params: obj
        }).then((res) => {
            console.log(res.data);
            if (res.data.data == 1) {
                alert("删除成功")
                checkAll.value = false
                Show()
            } else {
                alert("删除失败")
                return;
            }

        })
    }

}
//单个删除
const Delete = (id: any) => {

    //友情提示
    var f = confirm("确定删除吗？")
    //发送网路请求

    if (f == true) {
        let obj = {
            ids: id,

        };
        axios({
            url: '/api/JuMin/JuMinDel',
            method: 'delete',
            params: obj
        }).then((res) => {
            console.log(res.data);
            if (res.data.data == 1) {
                alert("删除成功")
                checkAll.value = false
                Show()
            } else {
                alert("删除失败")
                return;
            }

        })
    }

}
//批量审核
const examineAll = () => {
    if (ids.value.length == 0) {
        alert("请选择要审核的数据")
        return;
    }
    let obj = {
        ids: ids.value.toString(),
    }
    axios({
        url:'/api/JuMin/JuMinShenHe',
        method: 'put',
        params:obj
    }).then((res)=>{
        console.log(res.data);
        alert("审核通过")
        Show();
    }).catch((err)=>{
        console.log(err);
        alert("审核失败")
        return; 
    })
}


//修改跳转
const update = (id: any) => {
    router.push({
        path: '/update',
        query: {
            id: id
        }
    })
}

//导出
const exportExcel = () => {
    location.href='https://localhost:7197/api/JuMin/ExportExcel/ExportExcel';
}

</script>

<style scoped></style>